<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 search-box">
			<view class="rowbox search-info spb">
				<view class="rowbox">
					<u-icon name="search" size="40rpx"></u-icon>
					<input @input="searchInfo" v-model="name" placeholder="搜索疾病/医院/姓名找医生" />
				</view>
				<view class="rowbox search-btn">搜索</view>
			</view>
		</view>
		<template v-if="from=='index'">
			<view class="columnbox wdh-100 hot-box">
				<view class="wdh-100 hot-title">热门搜索</view>
				<view class="hot-list wdh-100">
					<view @click="searchHot(item)" v-for="(item,index) in searchlist" :key='index'>{{item.name}}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="rowbox wdh-100 search-second spb">
				<view class="rowbox one-search" @click="showKeshi">
					{{keshiname||'按科室找'}}
					<u-icon style="margin-left: 10rpx;" name="arrow-down-fill" size="20rpx"></u-icon>
				</view>
				<view class="rowbox one-search" @click="showJibing">
					{{jibingname||'按疾病找'}}
					<u-icon style="margin-left: 10rpx;" name="arrow-down-fill" size="20rpx"></u-icon>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<picker mode="region" @change="cityChange">
					<view class="rowbox one-search">{{province}}
						<u-icon style="margin-left: 10rpx;" name="arrow-down-fill" size="20rpx"></u-icon>
					</view>
				</picker>
				<!-- #endif -->
			</view>
			<view class="columnbox one-info" @click='sohowDetail(item.id)' v-for="(item,index) in infoList"
				:key='index'>
				<view class="rowbox wdh-100 one-ys als">
					<image :src="item.logo" mode="aspectFill" class="ys-img"></image>
					<view class="columnbox als  ys-info">
						<view class="ys-name">{{item.name}} <text>{{item.zhicheng}}</text> </view>
						<view class="rowbox yy-detail">
							<view>{{item.keshi}}</view>
							<text> | </text>
							<view>{{item.jigou}}</view>
						</view>
						<view class="wdh-100 ys-sc">擅长：{{item.sljb}}</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				type: '',
				name: '',
				pageNo: 1,
				keshiid: '',
				keshiname: '',
				jibingid: '',
				jibingname: '',
				province: '全国',
				searchflag: false,
				infoList: [],
				totalCount: 0,
				from: '',
				searchlist: [],
				refreshflag: false
			};
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		onReachBottom() {
			if (this.infoList.length < this.totalCount) {
				this.pageNo++
				this.getList()
			}
		},
		onShow() {
			if (this.refreshflag) {
				this.refreshflag = false
				this.pageNo = 1
				this.infoList = []
				this.name = ''
				this.getList()
			}
		},
		onLoad(options) {
			if (options.from) {
				this.from = options.from
				this.getHotSearch()
			} else {
				if (options.id) {
					if (options.type == 'jibingid') {
						this.jibingid = options.id * 1
						this.jibingname = options.name
					} else if (options.type == 'keshiid') {
						this.keshiid = options.id * 1
						this.keshiname = options.name
					}
				}
				this.getList()
			}
		},
		methods: {
			searchHot(v) {
				this.name = v.name
				this.from = ''
				this.pageNo = 1
				this.infoList = []
				this.getList()
			},
			getHotSearch() {
				this.$req.post('/user/searchs').then(res => {
					this.searchlist = res.data.data.splice(0, 10)
				})
			},
			cityChange(e) {
				this.province = e.detail.value[0]
			},
			showKeshi() {
				uni.navigateTo({
					url: '/pages/keshi/keshi?type=0'
				})
			},
			showJibing() {
				uni.navigateTo({
					url: '/pages/keshi/keshi?type=1'
				})
			},
			searchInfo() {
				if (this.from != '') {
					this.from = ''
				}
				this.pageNo = 1
				this.infoList = []
				this.keshiid = ''
				this.jibingid = ''
				this.getList()
			},
			getList() {
				this.$req.post('/user/doctors', {
					pageNo: this.pageNo,
					pageSize: 20,
					keshiid: this.keshiid,
					jibingid: this.jibingid,
					province: this.province == '全国' ? '' : this.province,
					search: this.name,
					uid: uni.getStorageSync('uid')
				}).then(res => {
					this.infoList = this.infoList.concat(res.data.data.data)
					this.totalCount = res.data.data.totalCount
				})
			},
			sohowDetail(id) {
				if (!this.isLogin) {
					this.$toLog()
					return false
				}
				this.$isEditInfo()
				uni.navigateTo({
					url: '/pages/doctor/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #f8f9fb;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.search-box {
		padding: 32rpx 36rpx;
		background: #fff;

		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
				width: 450rpx;
			}
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}

	.search-second {
		font-size: 28rpx;
		padding: 20rpx 20rpx;
	}

	.one-search {
		width: 200rpx;
	}

	.one-info {
		margin-bottom: 20rpx;
		background: #fff;
		width: 710rpx;
		padding: 20rpx 20rpx;
		border-radius: 20rpx;
	}

	.one-ys {
		width: 100%;
		justify-content: space-between;

		.ys-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100rpx;
		}

		.ys-info {
			width: calc(100% - 110rpx);
		}

		.ys-name {
			font-size: 32rpx;

			text {
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #959499;
			}
		}

		.yy-detail {
			font-size: 28rpx;
			margin-top: 10rpx;

			text {
				margin: 0 10rpx;
			}
		}

		.ys-sc {
			font-size: 24rpx;
			margin-top: 10rpx;
			color: #959499;
		}
	}

	.hot-box {
		background: #fff;
		padding: 20rpx 20rpx;
		border-top: #f9f9fb solid 1px;

		.hot-title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.hot-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			view {
				background: #f8f9fc;
				font-size: 28rpx;
				padding: 10rpx 32rpx;
				line-height: 32rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
				border-radius: 100rpx;
			}
		}
	}
</style>